<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        textarea {
            width: 250px;
            height: 250px;
        }

        li {
            float: left;
            list-style: none;
            margin: 0 20px;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <textarea id="in"></textarea>
    <button onclick="infoin()">插入</button>
    <button onclick="search()">查询</button>
    <input id="query">
    <ul>

    </ul>
    <script>
        let ul = document.querySelector('ul');
        let ww=[];

        function infoin() {
            let li = document.createElement('li');
            let h = document.getElementById('in').value;
            li.innerHTML = h;
            ww.push(h);
            ul.appendChild(li);
        }

        function search() {
            let gg=[];
          
            let w = document.getElementById('query').value;
            

            gg=fuzzyQuery(ww, w)
            for (let i = 0; i < gg.length; i++) {
               for(let g=0;g<ww.length;g++)
               {
                let li=document.getElementsByTagName('li');
                if(ww[g]==gg[i])
                {

                    li[g].style.background="red";
                    console.log(156)
                }
               }
            }
        }
            function fuzzyQuery(list, keyWord) {
                var arr = [];
                for (var i = 0; i < list.length; i++) {
                    if (list[i].indexOf(keyWord) >= 0) {
                        arr.push(list[i]);
                    }
                }
                return arr;
            }

        
    </script>
</body>

</html>